import * as echarts from 'echarts'

export const doubleNanDing = {
  title: {
    text: 'Nightingale Chart',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: '60%',
    textStyle: {
      color : '#ffffff'
    },
    data: [
      'rose1',
      'rose2',
      'rose3'
    ]
  },

  series: [
    {
      name: 'Radius Mode',
      type: 'pie',
      radius: [20, 60],
      center: ['25%', '30%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        formatter: '{a}\n{b}:{c} ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' }
      ]
    },
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 60],
      center: ['75%', '30%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        formatter: '{a}\n{b}:{c} ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
      },
      data: [
        { value: 30, name: 'rose 1' },
        { value: 28, name: 'rose 2' },
        { value: 26, name: 'rose 3' }
      ]
    }
  ]
}

// 基础折线图
export const basicLineData = {
  title: {
    text: '基础折线图',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  legend: {
    data: []
  },
  grid: {
    top: '40px',
    bottom: '12%',
    left: '6%',
    right: '6%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff'
    },
    data: []
    // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']

  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff'
    }
  },
  series: [{
    name: '',
    data: [],
    type: 'line',
    itemStyle: {
      normal: {
        label: {
          show: true, // 开启显示
          position: 'top', // 在上方显示
          textStyle: { // 数值样式
            color: '#ffffff',
            fontSize: 12
          }
        }
      }
    }
  },
    {
      name: '',
      data: [],
      type: 'line',
      itemStyle: {
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: '#ffffff',
              fontSize: 12
            }
          }
        }
      }
    },
    {
      name: '',
      data: [],
      type: 'line',
      itemStyle: {
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: '#ffffff',
              fontSize: 12
            }
          }
        }
      }
    },
    {
      name: '',
      data: [],
      type: 'line',
      itemStyle: {
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: '#ffffff',
              fontSize: 12
            }
          }
        }
      }
    },
    {
      name: '',
      data: [],
      type: 'line',
      itemStyle: {
        normal: {
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            textStyle: { // 数值样式
              color: '#ffffff',
              fontSize: 12
            }
          }
        }
      }
    }
  ]
}
// 折线堆叠图
export const lineData = {
  title: {
    text: '折线图堆叠',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  // legend: {
  //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  // },
  grid: {
    top: '15%',
    bottom: '12%',
    left: '6%',
    right: '6%',
    containLabel: true
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff'
    },
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff'
    }
  },
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
// 面积堆叠图
export const areaLineData = {
  title: {
    text: '堆叠区域图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
// 渐变面积堆叠图
export const gradualChangeAreaLineData = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '渐变堆叠面积图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: ['rgba(128, 255, 165)', 'rgba(1, 191, 236)']
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(128, 255, 165)'
        }, {
          offset: 1,
          color: 'rgba(1, 191, 236)'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: ['rgba(0, 221, 255)', 'rgba(77, 119, 255)']
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(0, 221, 255)'
        }, {
          offset: 1,
          color: 'rgba(77, 119, 255)'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: ['rgba(55, 162, 255)', 'rgba(116, 21, 219)']
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(55, 162, 255)'
        }, {
          offset: 1,
          color: 'rgba(116, 21, 219)'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        // color: ['rgba(255, 0, 135)', 'rgba(135, 0, 157)']
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255, 0, 135)'
        }, {
          offset: 1,
          color: 'rgba(135, 0, 157)'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: '总量',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        // color: ['rgba(255, 191, 0)','rgba(224, 62, 76)']
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(255, 191, 0)'
        }, {
          offset: 1,
          color: 'rgba(224, 62, 76)'
        }])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
}
// 自定义指定某个柱子颜色
export const userDefinedBarData = {
  title: {
    text: '自定义指定某个柱子颜色',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff',
      interval: 0,
      rotate:30
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff',
    }
  },
  series: [{
    data: [120, {
      value: 200
    }, 150, 80, 70, 110, 130],
    itemStyle: {
      normal: {
        label: {
          show: true, // 开启显示
          position: 'top', // 在上方显示
          textStyle: { // 数值样式
            color: '#ffffff',
            fontSize: 12
          }
        }
      }
    },
    type: 'bar'
  }]
}
// 基础柱状图
export const barData = {
  title: {
    text: '基础柱状图',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 10,
      color: '#3dcaff',
      rotate: 40
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 12,
      color: '#3dcaff'
    }
  },
  grid: {
    top: '40px',
    bottom: '12%',
    left: '6%',
    right: '6%',
    containLabel: true
  },
  color: '#FFCD43',
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',

    itemStyle: {
      normal: {
        label: {
          show: true, // 开启显示
          position: 'top', // 在上方显示
          textStyle: { // 数值样式
            color: '#ffffff',
            fontSize: 12
          }
        }
      }
    }
  }]
}
// 柱状堆叠图
export const stackBarData = {
  title: {
    text: '柱状堆叠图',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告'],
    textStyle: {
      color: '#3dcaff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        fontSize: 12,
        color: '#3dcaff'
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 12,
        color: '#3dcaff'
      }
    }
  ],
  series: [
    {
      name: '邮件营销',
      type: 'bar',
      stack: '广告',
      label: {
        show: true,
        formatter: '{c} ',
        fontSize: 12,
        color: '#ffffff',
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 12,
        rich: {
          name: {}
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'bar',
      stack: '广告',
      label: {
        show: true,
        formatter: '{c} ',
        fontSize: 12,
        color: '#ffffff',
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 12,
        rich: {
          name: {}
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'bar',
      stack: '广告',
      label: {
        show: true,
        formatter: '{c} ',
        fontSize: 12,
        color: '#e301fc',
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 12,
        rich: {
          name: {}
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
}
// 基础饼图
export const pieData = {
  title: {
    text: '',
    x: 'top',
    y: '4px',
    textStyle: {
      fontSize: 14,
      color: '#5da8e7'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: 'right',
    textStyle: {
      color: 'inherit'
    }
  },
  series: [
    {
      name: '设备状态占比',
      type: 'pie',
      radius: '50%',
      roseType: 'area',
      labelLine: {
        length: 6,
        length2: 4
      },
      data: [
        {value: 848, name: '搜索引擎', label: {color: '#409EFF'}},
        {value: 735, name: '直接访问', label: {color: '#1CA261'}},
        {value: 580, name: '邮件营销', label: {color: '#FFCD43'}},
        {value: 484, name: '联盟广告', label: {color: '#FF2525'}},
        {value: 300, name: '视频广告', label: {color: '#B848FF'}}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
// 多个饼图
export const pieData3 = {
  title: [
    {
      text: '多个饼图对比',
      x: 'top',
      y: '4px',
      textStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    }, {
      subtext: '饼图1',
      left: '16.67%',
      top: '75%',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    }, {
      subtext: '饼图2',
      left: '38.67%',
      top: '75%',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    },
    {
      subtext: '饼图3',
      left: '60.67%',
      top: '75%',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    },
    {
      subtext: '饼图3',
      left: '82.67%',
      top: '75%',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: '40%',
      center: ['50%', '50%'],
      data: [
        {
          name: 'Apples',
          value: 70
        }, {
          name: 'Pineapples',
          value: 27
        }, {
          name: 'Grapes',
          value: 18
        }
      ],
      label: {
        position: 'outer',
        alignTo: 'none',
        bleedMargin: 5,
        color: '#5da8e7'
      },
      left: 0,
      right: '66.6667%',
      top: 0,
      bottom: 0
    }, {
      type: 'pie',
      radius: '40%',
      center: ['50%', '50%'],
      data: [
        {
          name: 'Apples',
          value: 70
        }, {
          name: 'Pineapples',
          value: 27
        }, {
          name: 'Grapes',
          value: 18
        }
      ],
      label: {
        position: 'outer',
        alignTo: 'labelLine',
        bleedMargin: 5,
        color: '#5da8e7'
      },
      left: '53%',
      right: '80%',
      top: 0,
      bottom: 0
    }, {
      type: 'pie',
      radius: '40%',
      center: ['50%', '50%'],
      data: [
        {
          name: 'Apples',
          value: 70
        }, {
          name: 'Pineapples',
          value: 27
        }, {
          name: 'Grapes',
          value: 18
        }
      ],
      label: {
        position: 'outer',
        alignTo: 'edge',
        margin: 5,
        color: '#5da8e7'
      },
      left: '72%',
      right: '63%',
      top: 0,
      bottom: 0
    },
    {
      type: 'pie',
      radius: '40%',
      center: ['50%', '50%'],
      data: [
        {
          name: 'Apples',
          value: 70
        }, {
          name: 'Pineapples',
          value: 27
        }, {
          name: 'Grapes',
          value: 18
        }
      ],
      label: {
        position: 'outer',
        alignTo: 'edge',
        margin: 5,
        color: '#5da8e7'
      },
      left: '66.6667%',
      right: 0,
      top: 0,
      bottom: 0
    }
  ]
}
// 嵌套环形图
export const QAnnulPieData = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1548, name: '搜索引擎'},
        {value: 775, name: '直达'},
        {value: 679, name: '营销广告', selected: true}
      ]
    },
    {
      name: '访问来源',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,

        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        {value: 1048, name: '百度'},
        {value: 335, name: '直达'},
        {value: 310, name: '邮件营销'},
        {value: 251, name: '谷歌'},
        {value: 234, name: '联盟广告'},
        {value: 147, name: '必应'},
        {value: 135, name: '视频广告'},
        {value: 102, name: '其他'}
      ]
    }
  ]
}
// 南丁格尔环形占比图
export const nightingalePieData = {
  title: [
    {
      text: '南丁格尔环形占比图',
      x: 'top',
      y: '4px',
      textStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    },
    {
      subtext: '饼图1',
      left: '25%',
      top: '10px',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    },
    {
      subtext: '饼图2',
      left: '75%',
      top: '10px',
      textAlign: 'center',
      subtextStyle: {
        fontSize: 14,
        color: '#5da8e7'
      }
    }
  ],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: ['rose1', 'rose2', 'rose3', 'rose4']
  },
  series: [
    {
      name: '半径模式',
      type: 'pie',
      radius: [30, 50],
      center: ['50%', '60%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true,
        formatter: '{b} {c} '
      },
      labelLine: {
        length: 6,
        length2: 4
      },
      data: [
        {value: 40, name: 'rose 1', label: {color: '#409EFF'}},
        {value: 33, name: 'rose 2', label: {color: '#1CA261'}},
        {value: 28, name: 'rose 3', label: {color: '#FFCD43'}},
        {value: 22, name: 'rose 4', label: {color: '#FF2525'}},
        {value: 22, name: 'rose 5', label: {color: '#2DC4D2'}}
      ]
    },
    {
      name: '面积模式',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, 30],
      center: ['50%', '60%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: true,
        position: 'inner',
        formatter: '{b} {c} ',
        color: '#ffffff'
      },
      data: [
        {value: 30, name: 'rose 1', color: '#FF2525'},
        {value: 28, name: 'rose 2', color: '#1CA261'},
        {value: 26, name: 'rose 3', color: '#FFCD43'}
      ]
    }
  ]
}
// 基础雷达图
export const radarData = {
  title: {
    text: '基础雷达图'
  },
  legend: {
    data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
  },
  grid: {
    top: 60
  },
  radar: {
    center: ['50%', '60%'], // 中心点位置
    radius: '60%', // 半径
    indicator: [
      {name: '销售（Sales）', max: 6500},
      {name: '管理（Administration）', max: 16000},
      {name: '信息技术（Information Technology）', max: 30000},
      {name: '客服（Customer Support）', max: 38000},
      {name: '研发（Development）', max: 52000},
      {name: '市场（Marketing）', max: 25000}
    ]
  },
  series: [{
    name: '预算 vs 开销（Budget vs spending）',
    type: 'radar',
    data: [
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: '预算分配（Allocated Budget）'
      },
      {
        value: [5000, 14000, 28000, 26000, 42000, 21000],
        name: '实际开销（Actual Spending）'
      }
    ]
  }]
}

// 多标题仪表盘
export const gaugeData = {
  series: [
    {
      type: 'gauge',
      anchor: {
        show: true,
        showAbove: true,
        size: 18,
        itemStyle: {
          color: '#FAC858'
        }
      },
      pointer: {
        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
        width: 8,
        length: '80%',
        offsetCenter: [0, '8%']
      },

      progress: {
        show: true,
        overlap: true,
        roundCap: true
      },
      axisLine: {
        roundCap: true
      },
      data: [{
        value: 20,
        name: '完成率',
        title: {
          offsetCenter: ['-40%', '80%']
        },
        detail: {
          offsetCenter: ['-40%', '95%']
        }
      }
        // ,
        // {
        //   value: 40,
        //   name: '达标率',
        //   title: {
        //     offsetCenter: ['0%', '80%']
        //   },
        //   detail: {
        //     offsetCenter: ['0%', '95%']
        //   }
        // },
        // {
        //   value: 60,
        //   name: '优秀率',
        //   title: {
        //     offsetCenter: ['40%', '80%']
        //   },
        //   detail: {
        //     offsetCenter: ['40%', '95%']
        //   }
        // }
      ],
      title: {
        fontSize: 14,
        title: 'aaa'
      },
      detail: {
        width: 40,
        height: 14,
        fontSize: 14,
        color: '#fff',
        backgroundColor: 'auto',
        borderRadius: 3,
        formatter: '{value}%'
      }
    }]
}

// make a pie 的饼图
const imgSrc = ''
let sportsIcon = {
  'a': '',
  'b': '',
  'c': '',
  'd': '',
  'e': ''
}
export const makeAPie = {
  backgroundColor: '#2b2a38',
  graphic: {
    elements: [{
      type: 'image',
      z: 6,
      style: {
        image: imgSrc,
        width: 100,
        shadowBlur: 0,
        shadowColor: '#000',
        shadowOffsetX: '1',
        shadowOffsetY: '1'
      },
      left: 'center',
      top: '40%',
      position: [100, 100]
    }]
  },
  title: [{
    text: '',
    textAlign: 'center',
    x: '34%',
    y: '48%',
    textStyle: {
      color: '#8c949a',
      fontSize: 20,
      fontWeight: 'normal'
    }
  }],
  series: [
    {
      name: 'title',
      type: 'pie',
      radius: ['35%', '90%'],
      center: ['50%', '50%'],
      color: [
        new echarts.graphic.LinearGradient(0.3, 1, 0.8, 0.1, [{
          offset: 0,
          color: '#09b094'
        }, {
          offset: 1,
          color: '#015648'
        }
        ]),
        new echarts.graphic.LinearGradient(0, 0.5, 1, 0.7, [{
          offset: 0,
          color: '#633248'
        }, {
          offset: 1,
          color: '#40001d'
        }
        ]),
        new echarts.graphic.LinearGradient(0.1, 0, 0.1, 1, [{
          offset: 0,
          color: '#f09913'
        }, {
          offset: 1,
          color: '#6b4100'
        }
        ]),
        new echarts.graphic.LinearGradient(1, 0.5, 0, 0.7, [{
          offset: 0,
          color: '#c2352c'
        }, {
          offset: 1,
          color: '#6f0700'
        }
        ]),
        new echarts.graphic.LinearGradient(1, 0.7, 0.6, 0.1, [{
          offset: 0,
          color: '#1e77b1'
        }, {
          offset: 1,
          color: '#003354'
        }
        ])

      ],
      label: {
        normal: {
          formatter: '{b} {c} ',
          position: 'inside',
          rich: {
            a: {
              width: 50,
              height: 50,
              lineHeight: 50,
              shadowBlur: 0,
              shadowColor: '#2b2a38',
              shadowOffsetX: '1',
              shadowOffsetY: '1',
              backgroundColor: {
                image: sportsIcon.e
              }
            },
            b: {
              width: 50,
              height: 50,
              lineHeight: 50,
              shadowBlur: 0,
              shadowColor: '#2b2a38',
              shadowOffsetX: '1',
              shadowOffsetY: '1',
              backgroundColor: {
                image: sportsIcon.d
              }
            },
            c: {
              width: 50,
              height: 50,
              lineHeight: 50,
              shadowBlur: 0,
              shadowColor: '#2b2a38',
              shadowOffsetX: '1',
              shadowOffsetY: '1',
              backgroundColor: {
                image: sportsIcon.c
              }
            },
            d: {
              width: 50,
              height: 50,
              lineHeight: 50,
              shadowBlur: 0,
              shadowColor: '#2b2a38',
              shadowOffsetX: '1',
              shadowOffsetY: '1',
              backgroundColor: {
                image: sportsIcon.b
              }
            },
            e: {
              width: 50,
              height: 50,
              lineHeight: 50,
              shadowBlur: 0,
              shadowColor: '#2b2a38',
              shadowOffsetX: '1',
              shadowOffsetY: '1',
              backgroundColor: {
                image: sportsIcon.a

              }
            },
            nameStyle: {
              fontSize: 16,
              color: '#FFF',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#2b2a38',
              textShadowBlur: '0',
              textShadowOffsetX: 1,
              textShadowOffsetY: 1
            },
            rate: {
              fontSize: 20,
              lineHeight: 30,
              color: '#FFF',
              textBorderColor: 'rgba(0, 0, 0, 0)',
              textShadowColor: '#2b2a38',
              textShadowBlur: '0',
              textShadowOffsetX: 1,
              textShadowOffsetY: 1
            }
          }
        }
      },
      labelLine: {
        normal: {
          smooth: true,
          length: 10,
          lineStyle: {
            width: 1.5
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#2b2a38',
          borderWidth: 3
        }
      },
      data: [{
        value: 10,
        name: '短路'
      },
        {
          value: 20,
          name: '进水'
        },
        {
          value: 25,
          name: '高温'
        },
        {
          value: 30,
          name: '意外停机'
        },
        {
          value: 28,
          name: '检修'
        }
      ]
    },
    {
      type: 'pie',
      radius: ['35%', '90%'],
      center: ['50%', '50%'],
      z: 0,
      data: [{
        hoverOffset: 1,
        value: 100,
        itemStyle: {
          color: 'rgba(251, 200, 79, 1)',
          shadowBlur: 20,
          shadowColor: '#241210'
        },
        label: {
          show: false
        },
        labelLine: {
          normal: {
            smooth: true,
            lineStyle: {
              width: 0
            }
          }
        },
        hoverAnimation: false
      }]
    },
    {
      type: 'pie',
      radius: ['25%', '0%'],
      center: ['50%', '50%'],
      z: 0,
      data: [{
        hoverOffset: 1,
        value: 100,
        itemStyle: {
          color: '#3d3c4a'
        },
        label: {
          show: false
        },
        labelLine: {
          normal: {
            smooth: true,
            lineStyle: {
              width: 0
            }
          }
        },
        hoverAnimation: false
      }]
    }
  ]
}

// 桑吉图
let size = 75 // 节点大小

let listdata = [] // 节点数组
let links = [] // 链接数组
let legendes = ['对象属性', '关联对象', '所属类别', '车间']
let texts = [] // 链接数组

let property_cat_json = {
  'A车间': 'A车间',
  'B车间': 'B车间',
  'C车间': 'C车间'
}

let property_rel_cat = ['1000个', '200跟0', '1000只']
let rel_obj_cat_json = {
  'D车间': 'D车间',
  'E车间': 'E车间',
  'F车间': 'F车间',
  'G车间': 'G车间'
}
let rel_obj_rel_cat = ['1200个', '900跟', '1000只', '2000片']

let obj_name_cat_json = {
  车间: '资源\n数量'
}

function setData(json, n) {
  let i = 0
  for (let p in json) {
    listdata.push({
      x: i * 50,
      y: size + i * 10,
      'name': p,
      'showName': json[p],
      'symbolSize': size,
      'category': n,
      'draggable': 'true',
      formatter: function (params) {
        return params.data.showName
      }
    })
    i++
  }
}

function setLinkData(json, relarr, title) {
  if (relarr !== '') {
    let i = 0
    for (let p in json) {
      links.push({
        'source': p,
        'target': title,
        'value': relarr[i],
        lineStyle: {
          normal: {
            // text: relarr[i],
            color: 'source'
          }
        }
      })
      i++
    }
  } else {
    for (let p2 in json) {
      links.push({
        'source': p2,
        'target': title,
        'value': '',
        lineStyle: {
          normal: {
            color: 'source'
          }
        }
      })
    }
  }
}

for (let i = 0; i < legendes.length; i++) {
  texts.push({
    'name': legendes[i]
  })
}

setData(property_cat_json, 0)
setData(rel_obj_cat_json, 1)
setData(obj_name_cat_json, 3)

setLinkData(property_cat_json, property_rel_cat, legendes[3])
setLinkData(rel_obj_cat_json, rel_obj_rel_cat, legendes[3])
export const sangJiPie = {
  backgroundColor: '#fff',
  tooltip: {
    formatter: '{b}'
  },
  animationDuration: 100,
  animationEasingUpdate: 'quinticInOut',
  series: [{
    name: '知识图谱',
    type: 'graph',
    layout: 'force',
    radius: ['90%', '90%'],
    // node: {
    //     symbolSize : 40
    // },
    force: {
      repulsion: 100,
      gravity: 0.02,
      edgeLength: [10, 50],
      layoutAnimation: true
    },
    data: listdata,
    links: links,
    categories: texts,
    roam: true,
    nodeScaleRatio: 0, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
    focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
    lineStyle: {
      normal: {
        opacity: 0.5,
        width: 2,
        curveness: 0
      }
    },
    label: {
      normal: {
        show: true,
        position: 'inside',
        textStyle: { // 标签的字体样式
          color: '#fff', // 字体颜色
          fontWeight: 'normal', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
          fontSize: '14' // 字体大小
        },
        formatter: function (params) {
          return params.data.showName // 此处为label转换 并转换颜色
        },
        fontSize: 18,
        fontStyle: '600'
      }
    },
    itemStyle: { // 节点圆圈的全局样式
      normal: {
        radius: 60,
        borderColor: '#fff',
        borderWidth: 4,
        shadowBlur: 10,
        shadowColor: 'rgba(98, 198, 248, 0.5)'
      }
    },
    edgeLabel: {
      normal: {
        show: true,
        textStyle: {
          fontSize: 12,
          color: '#fff'
        },
        formatter: '{c}'
      }
    }
  }],
  color: ['#F5BB4A', '#62C6F8'] // 自定义调色板
}

// 最基础的多柱状图
export const basicLineSimple = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      {product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7},
      {product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1},
      {product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5},
      {product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1}
    ]
  },
  xAxis: {type: 'category'},
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
}

// 多柱状图
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}',
  fontSize: 16,
  rich: {
    name: {}
  }
};

export const doubleLineSimple = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert']
  },
  toolbox: {
    show: false,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    }
  ]
}

// 环形占比图
export const annularPieData = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: '搜索引擎'},
        {value: 735, name: '直接访问'},
        {value: 580, name: '邮件营销'},
        {value: 484, name: '联盟广告'},
        {value: 300, name: '视频广告'}
      ]
    }
  ]
}
